<template>
	<view v-if="isReady">
		
		<uni-nav-bar  @clickLeft="handleback" color="white" backgroundColor="#0181FF" left-icon="back" statusBar="true" title="岛上有家书店-书本详情"></uni-nav-bar>
		
		
		        <!--书名-->
		<view  class="animation-fade text-xxl text-black text-bold bg-white cu-bar shadow padding-xs">
		    <text selectable>{{book.title}}</text>
			
		</view>
		
		
		<view class="cu-card shadow" >
		
		    <view class="margin-top cu-item shadow-blur">
		
		
		        <!--相关信息-->
		        <view class="content flex">
		            <!--书的图片-->
		            <image :src="book.img"
		                   class="image padding animation-slide-left animation-fade" @click="handlePreviewImage"></image>
		
		            <view class="animation-slide-right animation-fade margin-top padding-sm  text-df text-left text-content">
		                <view>
		                    <text selectable class="text-grey text-bold">ISBN:</text>
		                    <text selectable>{{book.isbn}}</text>
		                </view>
		
		                <view>
		                    <text selectable class="text-grey text-bold">作者:</text>
		                    <text selectable>{{book.author}}</text>
		                </view>
		                <view>
		                    <text selectable class="text-grey text-bold">出版社:</text>
		                    <text selectable>{{book.publisher}}</text>
		                </view>
		                <view>
		                    <text selectable class="text-grey text-bold">出版年:</text>
		                    <text selectable>{{book.pubdate}}</text>
		                </view>
		                <view>
		                    <text selectable class="text-grey text-bold">装帧:</text>
		                    <text selectable>{{book.binding}}</text>
		                </view>
		                <view>
		                    <text selectable class="text-grey text-bold">定价:</text>
		                    <text selectable>{{book.price}}</text>
		                </view>
		            </view>
		            
		
		        </view>
		    </view>
		
		    <view class="cu-item padding-sm animation-slide-top">
		        <view class="text-content text-left text-bold text-lg text-blue">
		            <text selectable>内容简介-------</text>
		        </view>
		        <view class="animation-fade margin-top-sm" :class="book.gist=='暂无简介'?'text-center':''" 
				style="-webkit-box-orient: vertical;-webkit-line-clamp:3;overflow: hidden;text-overflow: ellipsis;"
				:style="{'display':isFold?'-webkit-box':'block','text-indent':book.gist!=='暂无简介'?'2em':''}"
				>
				
		            <text decode="true" selectable space="nbsp">{{book.gist}}</text>
		        </view>
			
			
		
		        <!--箭头图标-->
		        <view v-if="book.gist!=='暂无简介'&&book.gist.length>69" class="margin-top-xs text-center">
		
		            <text :class="isFold?'cuIcon-unfold':'cuIcon-fold' " class="text-bold" @click="handleShow"></text>
		        </view>
		    </view>
		
		
		    <!--选择新旧程度-->
		    <!-- <view class="cu-item margin-top-xl padding-sm animation-slide-top">
		        <view class="text-left text-bold text-lg text-blue">
		            <text selectable>新旧程度-------</text>
		        </view>
		
		        <view class="margin-top cf">
		            <button @click="showModal"  class="fl cu-btn bg-gradual-blue round text-bold" style="width:150rpx">选 择</button>
		            <view class="fr margin-top-xs text-lg">
		                <text class="text-green text-bold">当前选择:  </text>
		                {{current_choose}} {{current_price}}元
		            </view>
		
		        </view> -->
		
	
		
		
		        <!--选择价格模态框-->
		            
		
		
		
		    </view>
		</view>
		
		
		
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				// array:['全新','九五成','九成新','八五成','八成新','七成新'],
				// index:0,
				// choose_price:0,
				book:{},
				isFold:true,
				current_price:0,
				// current_choose:"",
				// choose:"",
				book_index:null,
				isReady:false
			}
		},
		
		onReady() {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			setTimeout(function() {
				_self.isReady = true;
				uni.hideLoading();
			}, 1000)
		},
		
		onLoad(options){
			this.book = JSON.parse(decodeURIComponent(options.book));
			_self = this;
			// console.log(this.book_index);
			// console.log(current_book);
		},
		
		methods: {
			handleback() {
				uni.navigateBack({
					
				})
			},
			
			//弹出单选模态框按下"确定"
			handleConfirm(){
			  this.setCurrentPrice();
			  this.hideModal();
			  
			  this.current_choose = this.choose;
			},
			
			//单选模态框
			handleRadioChange(e){
			  // console.log(e.detail.value);
			  let index;
			  for (let i = 0;i<this.array.length;i++){
			    if (this.array[i]===e.detail.value){
			      index = i;
			    }
			  }
			  this.setChoosePrice(index);
			  
			  this.choose = this.array[index];
			},
			
			//设置当前选择价格
			setCurrentPrice(){
			  
			  this.current_price = this.choose_price;
			},
			
			//展开和收起
			handleShow(){
			 
			  this.isFold = !this.isFold;
			
			},
			
			//点击图片大图预览
			handlePreviewImage(e){
			  uni.previewImage({
			    urls:new Array(this.book.bookImg)
			  });
			},
			
			//根据新旧程度设置价格
			setChoosePrice(index){
			  switch (index) {
			    case 0:
			      
				  this.choose_price = this.book.price;
			      break;
			    case 1:
			      
				  this.choose_price = (this.book.price * 0.95).toFixed(2);
				  
			      break;
			    case 2:
			      
				  this.choose_price = (this.book.price * 0.9).toFixed(2);
			      break;
			    case 3:
			      
				  this.choose_price = (this.book.price * 0.85).toFixed(2);
			      break;
			    case 4:
			      
				  this.choose_price = (this.book.price * 0.8).toFixed(2);
			      break;
			    case 5:
			      
				  this.choose_price = (this.book.price * 0.7).toFixed(2);
			      break;
			  }
			}
			
			
		}
	}
	
	
	
	
</script>

<style>

</style>
